
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <link rel="stylesheet" th:href="@{css/login.css}">
    <!--写base标签，永远固定相对路径跳转的结果-->
    <base href="http://localhost:8080/library/">

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" th:src="@{script/jquery-1.7.2.js}"></script>

    <script type="text/javascript">
        //页面加载完成之后
        $(function(){

            //用于页面加载时判断当前是否是注册块
            // alert("Please enter");
            var obj = document.getElementById("regist-btn");
            var flag1 = $(obj).attr('flag1');
            // alert(obj);
            // alert(flag1);
            if(flag1){
                $(".pre-box").css("transform","translateX(100%)")
                $(".pre-box").css("background-color","#c9e0ed")
                $(".pre-img").attr("src","./img/login/regist.jpg")
            }


            //给验证码图片绑定单击事件
            $("#code_img").click(function () {
                //alert("1");
                //在事件响应的function函数中有一个this对象，是当前正在响应事件的dom对象
                //src属性表示验证码的img标签的图片路径，可读可写
                this.src= "http://localhost:8080/library/kaptcha?d="+new Date();
            });


            //给注册绑定单击事件
            $("#regist-btn").click(function() {

                //验证学号：必须是数字
                //1、获取sno输入框的内容
                var snoText = $("#sno").val();
                if(snoText==""){
                    //4、提示用户结果
                    $("span.regist-errorMsg").text("学号不能为空！");
                    return false;
                }
                //2、创建正则表达式
                const  snoPatt = /^[0-9]*$/;
                //3、使用test方法验证
                if(!snoPatt.test(snoText)){
                    //4、提示用户结果
                    $("span.regist-errorMsg").text("学号不合法！");
                    return false;
                }

                // 验证用户名：必须由字母，数字下划线组成，并且长度在5-12位
                //1、获取用户输入框里的内容
                var usernameText = $("#username").val();
                //2、创建正则表达式对象
                var usernamePatt =/^\w{5,12}$/;
                //3、使用test方法验证
                if (!usernamePatt.test(usernameText)) {
                    //4、提示用户结果
                    $("span.regist-errorMsg").text("用户名不合法！");
                    return false;
                }
                // 验证密码：必须由字母，数字下划线组成，并且长度为5-12位
                //1、获取密码输入框里的内容
                var passwordText = $("#password").val();
                //2、创建正则表达式对象
                var passwordPatt = /^\w{5,12}$/;
                //3、使用test方法验证
                if (!passwordPatt.test(passwordText)) {
                    //4、提示用户结果
                    $("span.regist-errorMsg").text("密码不合法！");
                    return false;
                }
                // 验证确认密码：和密码相同
                //1、获取确认密码的内容
                var repwdText = $("#repwd").val();
                //2、和密码比较
                if(repwdText!=passwordText){
                    //3、提示用户
                    $("span.regist-errorMsg").text("确认密码和密码不一致！")
                    return false;
                }
                // 邮箱验证：xxxxx@xxx.com
                //1、获取邮箱里的内容
                var emailText = $("#email").val();
                //2、创建正则表达式对象
                var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
                //3、使用test方法验证
                if(!emailPatt.test(emailText)){
                    //4、提示用户
                    $("span.regist-errorMsg").text("邮箱格式不正确！")
                    return false;
                }

                // 验证码：现在只需要验证用户已输入，因为还没将到服务器，验证码生成。
                var codeText = $("#code").val();
                //去掉验证码前后空格
                codeText = $.trim(codeText);
                if(codeText==null ||codeText=="" ){
                    $("span.regist-errorMsg").text("验证码不能为空！")
                    return false;
                }
                $("span.regist-errorMsg").text("");
            });
        });
    </script>

</head>
<body>
<div class="login-box">
    <div class="pre-box">
        <div class="img-box">
            <img class="pre-img" th:src="@{img/login/login.jpg}" alt="">
        </div>
    </div>
    <div class="regist-form">
        <div class="title-box">
            <h4>注册</h4>
        </div>
        <div class="regist-info">
            <form th:action="@{/registSuccess}" method="post">
                <span class="regist-errorMsg">
                        [[${regist_msg}]]
                </span>
                <input class="info" type="text" placeholder="学号" autocomplete="off" name="sno" id="sno">
                <input class="info" type="text" placeholder="用户名" autocomplete="off" name="username" id="username">
                <input class="info" type="password" placeholder="密码" autocomplete="off" name="password" id="password">
                <input class="info" type="password" placeholder="确认密码" autocomplete="off" name="repwd" id="repwd">
                <input class="info" type="text" placeholder="邮箱" autocomplete="off" name="email" id="email">
                <input class="yzm" type="text" placeholder="验证码" autocomplete="off" name="code" id="code">
                <img id="code_img" alt="" th:src="@{/kaptcha}">
                <input id="regist-btn" class="button" type="submit" value="注册" th:flag1="${session.flag1}">
            </form>

        </div>
        <div class="regist-bottom">
            <p onclick="mySwitch()">已有账号?去登录</p>
        </div>
    </div>
    <div class="login-form">
        <div class="title-box">
            <h4>登录</h4>
        </div>
        <div class="login-info">
            <form th:action="@{/loginSuccess}" method="post">
                <div class="login-select">
                    <label>管理登录：</label>
                    <input id="radio1" th:value="admin" type="radio" name="radio"/>
                    <label>读者登录：</label>
                    <input id="radio2" th:value="reader" type="radio" name="radio" />
                    <span class="login-errorMsg">
                            [[${login_msg}]]
                    </span>
                </div>
                <input class="info" type="text" placeholder="用户名" autocomplete="off" name="username">
                <input class="info" type="password" placeholder="密码"  autocomplete="off" name="password">
                <input class="button" id="login_btn" type="submit" value="登录">
            </form>
        </div>
        <div class="login-bottom">
            <p onclick="mySwitch()">没有账号?去注册</p>
        </div>
    </div>
</div>
<script>
    let flag= true;
    const mySwitch=()=>{
        if(flag){
            $(".pre-box").css("transform","translateX(100%)")
            $(".pre-box").css("background-color","#c9e0ed")
            $(".pre-img").attr("src","./img/login/regist.jpg")
        }else{
            $(".pre-box").css("transform","translateX(0%)")
            $(".pre-box").css("background-color","#edd4dc")
            $(".pre-img").attr("src","./img/login/login.jpg")
        }
        flag=!flag
    }
</script>
</body>
</html>